內置指令 v-for、v-if

▸ v-for

通常使用於多筆資料的渲染，呈現的寫法是這樣子：

<div v-for="item in items">
  {{ item.text }}
</div>

如果我們有需要替索引命名，則可以這麼寫：

<div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

v-for 的渲染不會去移動到資料，而此時我們如果有需要它做重新排列，則需要使用到 Key：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

▸ v-if

當與 v-for 做搭配時，v-if 通常是做條件判斷。

<div v-for="item in items" :key="item.id">
	<template v-if="item.name === '' ">
		{{ item.name }}
	</template>
</div>

要注意的是 v-for 與 v-if 不建議一起使用，因為 v-for 優先級較高，如果一起使用的話，每一次 v-for 都會執行 v-if，造成不必要的計算。

以下面的例子來說，假設 100 個名字中，只有幾個需要用到 v-if，這樣的寫法會使 v-for 對每一個名字都使用 v-if。

<div v-for="item in items" v-if="item.name === '' " :key="item.id">
	{{ item.name }}
</div>

小任務時間又到了 ☺

➔
任務：
操作 這個模板，執行以下要求 ( 只能操作 HTML 的部分 )：

請使用 v-for 渲染資料如下圖，並搭配使用 v-if 進行歸類判斷

解答：

<!-- index.html -->
<div id="app">
  <div class="container p-3">
    <h3>年紀大於 25 歲的同事</h3>
    <ul>
      <template 
        v-for="item in collegueList"
        :key="item"
      >
        <li v-if="item.age > 25">
          <p 
             v-for="(value, key) in item" 
             :key="item"
          >
            屬性: {{ key }}，值: {{ value }}
          </p>
        </li>
      </template>
    </ul>
    <h3>年紀小於 25 歲的同事</h3>
    <ul>
      <template 
        v-for="item in collegueList"
        :key="item"
      >
        <li v-if="item.age < 25">
          <p
            v-for="(kkbox, key) in item"
            :key="item"
          >
						屬性: {{ key }}，值: {{ kkbox }}
					</p>
        </li>
      </template>
    </ul>
  </div>
</div>

// all.js
const app = {
  data() {
    return {
      collegueList: [
        {
          name: 'Jack',
          age: 18,
          jobName: 'Frontend Engineer'
        },
        {
          name: 'Nick',
          age: 27,
          jobName: 'Backend Engineer'
        },
        {
          name: 'Ming',
          age: 19,
          jobName: 'App Engineer'
        },
        {
          name: 'Zekk',
          age: 28,
          jobName: 'Project Manager'
        },
      ]
    }
  }
}
Vue.createApp(app).mount('#app')

寫到關於 v-for、v-if，讓我想到前幾個月寫網站的時候，曾經被這兩個弄得霧煞煞，常常資料一多哪個要對哪個開始傻傻分不清，不過像這樣整理出來會突然發現其實沒有這麼難分辨，搞清楚我們要抓取的是哪裡的資料就對了。

那麼，就感謝大家的收看，晚安~